{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h1 class="page-title">Free Online URL Encoder & Decoder - Encode and Decode URLs</h1>
      </div>
      <div class="seo-h1">
        <h2>URL Encoding and Decoding Made Simple</h2>
        <h2>Key Features of Our URL Tool
            <ul>
                <li>Encode URLs: Convert URLs with special characters to percent-encoded format for safe transmission.</li>
                <li>Decode URLs: Transform percent-encoded URLs back to readable format.</li>
                <li>Real-time Processing: Instant encoding and decoding as you type.</li>
                <li>Character Count: Track input and output text length.</li>
                <li>Copy to Clipboard: One-click copy functionality for easy sharing.</li>
                <li>100% Client-Side: Your data never leaves your browser, ensuring privacy and security.</li>
            </ul>
        </h2>
        <h2>How to Use This URL Tool?
            <ul>
                <li>Paste or type your URL into the input area.</li>
                <li>Click "Encode" to convert URL to percent-encoded format.</li>
                <li>Click "Decode" to convert percent-encoded URL back to readable format.</li>
                <li>Use the "Copy" button to copy results to your clipboard.</li>
            </ul>
        </h2>
        <h2>Frequently Asked Questions (FAQs)
            <h3>What is URL encoding?</h3>
            <h3>When should I use URL encoding?</h3>
            <h3>Is this URL tool free and secure?</h3>
        </h2>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
.url-container {
    margin-bottom: 1rem;
}
.url-textarea {
    border: 1px solid #2a2b2d;
    border-radius: 8px;
    background-color: #1e2022;
    color: #ffffff;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px;
    resize: vertical;
    width: 100%;
    min-height: 150px;
}
.url-textarea:focus {
    outline: none;
    border-color: #0054a6;
    box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.2);
}
.url-textarea::selection { background:#0054a6; color:#fff; }
.btn-group {
    margin: 1rem 0;
}
.char-count {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
}
.result-section {
    margin-top: 1rem;
}
</style>

<div class="page-body">
    <div class="container-xl">
       <div class="card">
          <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="url-container">
                        <label class="form-label">Input URL</label>
                        <textarea id="inputText" class="url-textarea" placeholder="Enter URL to encode or encoded URL to decode..." rows="15"></textarea>
                        <div class="char-count">Characters: <span id="inputCount">0</span></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="url-container">
                        <label class="form-label">Output</label>
                        <textarea id="outputText" class="url-textarea" readonly placeholder="Encoded/decoded result will appear here..." rows="15"></textarea>
                        <div class="char-count">Characters: <span id="outputCount">0</span></div>
                    </div>
                </div>
            </div>

            <div class="btn-group w-100" role="group">
                <button type="button" class="btn btn-primary" id="encodeBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="8.5" cy="7" r="4"></circle>
                        <path d="M20 8v6"></path>
                        <path d="M23 11l-3-3-3 3"></path>
                    </svg>
                    Encode URL
                </button>
                <button type="button" class="btn btn-secondary" id="decodeBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="8.5" cy="7" r="4"></circle>
                        <path d="M20 16v-6"></path>
                        <path d="M23 13l-3 3-3-3"></path>
                    </svg>
                    Decode URL
                </button>
                <button type="button" class="btn btn-success" id="copyBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                    </svg>
                    Copy Output
                </button>
                <button type="button" class="btn btn-outline-secondary" id="clearBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
                        <polyline points="3,6 5,6 21,6"></polyline>
                        <path d="M19,6v14a2,2 0 0,1-2,2H7a2,2 0 0,1-2-2V6m3,0V4a2,2 0 0,1,2-2h4a2,2 0 0,1,2,2v2"></path>
                    </svg>
                    Clear All
                </button>
            </div>
          </div>
       </div>
    </div>
</div>

<script type='text/javascript'>
$(document).ready(function() {
    const inputText = $('#inputText');
    const outputText = $('#outputText');
    const inputCount = $('#inputCount');
    const outputCount = $('#outputCount');
    const encodeBtn = $('#encodeBtn');
    const decodeBtn = $('#decodeBtn');
    const copyBtn = $('#copyBtn');
    const clearBtn = $('#clearBtn');

    // Update character counts
    function updateCounts() {
        inputCount.text(inputText.val().length);
        outputCount.text(outputText.val().length);
    }

    // URL encode function
    function encodeURL() {
        try {
            const text = inputText.val();
            if (text.trim() === '') {
                outputText.val('');
                updateCounts();
                return;
            }
            const encoded = encodeURIComponent(text);
            outputText.val(encoded);
            updateCounts();
        } catch (error) {
            outputText.val('Error: Unable to encode URL');
            updateCounts();
        }
    }

    // URL decode function
    function decodeURL() {
        try {
            const text = inputText.val().trim();
            if (text === '') {
                outputText.val('');
                updateCounts();
                return;
            }
            const decoded = decodeURIComponent(text);
            outputText.val(decoded);
            updateCounts();
        } catch (error) {
            outputText.val('Error: Invalid URL encoding');
            updateCounts();
        }
    }

    // Copy to clipboard function
    function copyToClipboard() {
        const output = outputText.val();
        if (output.trim() === '') {
            alert('Nothing to copy!');
            return;
        }

        navigator.clipboard.writeText(output).then(function() {
            // Temporarily change button text
            const originalText = copyBtn.html();
            copyBtn.html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><polyline points="20,6 9,17 4,12"></polyline></svg>Copied!');
            setTimeout(function() {
                copyBtn.html(originalText);
            }, 2000);
        }).catch(function() {
            // Fallback for older browsers
            outputText.select();
            document.execCommand('copy');
            alert('Copied to clipboard!');
        });
    }

    // Clear all text
    function clearAll() {
        inputText.val('');
        outputText.val('');
        updateCounts();
        inputText.focus();
    }

    // Event listeners
    inputText.on('input', updateCounts);
    encodeBtn.on('click', encodeURL);
    decodeBtn.on('click', decodeURL);
    copyBtn.on('click', copyToClipboard);
    clearBtn.on('click', clearAll);

    // Initialize character counts
    updateCounts();

    // Auto-process on input (optional, you can remove this if you prefer manual operation)
    let timeout;
    inputText.on('input', function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            // Auto-detect if input looks like URL encoded and decode, otherwise encode
            const text = inputText.val().trim();
            if (text.includes('%') && text.match(/%[0-9A-Fa-f]{2}/)) {
                decodeURL();
            }
        }, 500);
    });
});
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Free Online URL Encoder and Decoder",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "description": "Encode and decode URLs online for free. Fast, secure, and works directly in your browser.",
  "keywords": "url encoder, url decoder, online tool, uri converter"
}
</script>
{%endblock%}
